<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>头皮护养</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .input {
            border-bottom: 1px solid #ccc;
        }

        .placeholder {
            width: 80px;
            height: 80px;
            background-color: #ccc;
            /* 灰色背景 */
            display: flex;
            justify-content: center;
            align-items: center;
            color: #666;
            font-size: 14px;
            border-radius: 4px;
        }

        .shadow-md{
            --tw-shadow:0
        }
    </style>
</head>

<body class="bg-white flex items-center justify-center">
    <div class="bg-white shadow-md rounded-lg p-6 w-96" style="padding-top:100px">
        <div class="flex justify-between items-center mb-4">
            <div>
                <div class="text-2xl font-semibold">头皮护养</div>
                <div class="text-sm text-gray-500 mb-4">积分奖励 20%</div>
            </div>
            <!-- <img src="path/to/your/image.jpg" alt="Product Image" class="w-12 h-12"> -->
            <div class="placeholder"></div>
        </div>

        <div class="mb-4">
            <div class="text-lg font-semibold">金额</div>
            <div class="flex items-center" style="gap: 10px;">
                <div class="text-2xl">￥</div>
                <input type="text" placeholder="请输入金额" class="w-full border-none rounded p-2 mt-2 input">
            </div>
        </div>
        <div class="text-red-500 mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span class="ml-2">暂无可使用抵用券</span>
        </div>
        <button class="bg-blue-500 text-white w-full py-2 rounded">去支付</button>
        <div class="text-center mt-4">
            <a href="#" class="text-blue-500">切换商家账号登录</a>
        </div>
    </div>
</body>

</html>